Інформацію на вебсторінці сайту можна подати у вигляді таблиці.

Теги розмітки таблиці

Ознайомимося з основними тегами розмітки таблиці:

Розглянемо, як розмічати таблицю відповідними тегами (рис. 23.1):

Макет вебсторінки можна утворити за допомогою HTML-таблиці, об’єднуючи певні клітинки і визначаючи розміщення певних об’єктів. Але зараз для вебсторінок застосовують теги структурування документа (див. форзац 2) і CSS (від англ. Cascading Style Sheets) — каскадні таблиці стилів, які розміщують у HTML-файлі або в окремому файлі.

Атрибути тегів розмітки таб/іиці

Теги можуть містити атрибути. Атрибути в тегах розмітки таблиці впливають на вигляд таблиці, клітинок і написів у них:

Атрибут	Призначення
align	Вирівнювання таблиці у вікні браузера
background	Фоновий малюнок
bgcolor	Колір тла
border	Товщина рамки в пікселях
bordercolor	Колір рамки
cellspacing	Відстань між клітинками таблиці
cellpadding	Відстань між текстом клітинки та її межею
rules	Відображення рамок таблиці
title	Спливна підказка
width	Ширина таблиці (клітинки) у відсотках або пікселях
height	Висота таблиці (клітинки) у відсотках або пікселях

Оскільки ширина клітинок одного стовпця не може бути різною в різних рядках, то її достатньо вказати лише для одного рядка.

ширина таблиці дорівнює ширині робочого

поля вікна браузера;

ширина клітинки дорівнює половині ширини

таблиці.

Відступи

Для налаштування відстаней між клітинками, а також між текстом і межами використовують атрибути відступів (рис. 23.2):

Форматування вмісту к/іітинок

Теги рядків (<tr>) і клітинок (<td>) можуть включати атрибути для змінення вирівнювання тексту відносно меж клітинки.

Атрибут align дозволяє задавати горизонтальне вирівнювання:

При розмічанні таблиці виникає потреба об’єднати кілька клітинок. Для цього використовують атрибути colspan (злиття клітинок у рядку) (рис. 23.4, а) і rowspan (злиття клітинок у стовпці) (рис. 23.4, б).

Питання для самоперевірки

1. Як додати таблицю на вебсторінку сайту?

2. Як вирівняти текст у клітинці таблиці по горизонталі?

3. Як вирівняти текст у клітинці таблиці по вертикалі?

4. Як установити товщину меж таблиці?

5. Як установити відступ від тексту в клітинці до її меж?

6. Як об’єднати клітинки одного рядка або стовпця таблиці?

Вправа 23

Створити таблицю за зразком, наведеним на рис. 23.5.

1) Відкрийте текстовий редактор та створіть HTML-документ для відображення таблиці (рис. 23.6). Збережіть документ з іменем Вправа 23.html.

2) Змініть HTML-код, об’єднавши потрібні клітинки за зразком, і заповніть їх, як показано на рис. 23.7.

3) Задайте розміри таблиці в пікселях: ширина — 400, висота — 200.

4) Установіть параметри клітинок у відсотках від розміру таблиці: висота верхнього рядка — 35%, ширина другого і третього стовпців — 60% і 20% відповідно.

5) Вирівняйте по вертикалі і горизонталі написи в клітинках (див. рис. 23.5).

6) Збережіть документ. Перегляньте таблицю в браузері. За необхідності відформатуйте клітинки таблиці і написи в них у відповідності до зразка (рис. 23.5).

Завершіть роботу за комп’ютером.

Комп'ютерне тестування

Виконайте тестове завдання 23 із автоматичною перевіркою результату.

Практична робота \\

Створення головної сторінки сайту засобами HTML

Завдання: створити головну сторінку сайту засобами HTML, дотримуючись правил ергономічного розміщення матеріалів на вебсторінці.

Обладнання: комп’ютер, підключений до інтернету, комп’ютерний або онлайн-редактор сайтів.

Теоретична частина

Більшість шаблонів, які пропонують СКВ, створюються професіоналами; в них уже дотримано основні правила щодо розробки сайтів:

• вміст лаконічний, поданий у зрозумілій формі;

• посилання на вебсторінках помітні та однозначні;

• навігація вебсторінками сайту зручна і проста.

Вебсторінки сайту мають відповідати основним правилам розробки

сайтів та критеріям ергономічного розміщення матеріалів на сторінках сайту.

Критерії ергономічного сайту Оформлення вебсторінок

• Дотримання єдиного стилю оформлення вебсторінок.

• Вибір кольорів тла та тексту згідно з правилами колористики.

• Читабельний шрифт, виділення заголовків кольором і більшим розміром шрифта.

• Вирівнювання тексту за шириною.

• Якісні графічні зображення з можливістю перегляду.

• Уникнення використання подразнюючої анімації.

• Текстові поля і зображення з відступами один від одного та від країв таблиць.

Зміст наповнення

• Зазначення назви сайту на всіх вебсторінках.

• Наявність заголовків на вебсторінках.

• Розміщення найважливіших відомостей на початку вебсторінки.

• Розміщення тексту максимум у три колонки.

• Недопустимість використання горизонтальних смуг прокручування для перегляду сторінок.

• Дублювання в нижньому колонтитулі меню, роміщення контактних даних власника ресурсу, відомостей про авторські права.

Розташування вмісту

• Можливість переходу з усіх вебсторінок на головну сторінку.

• Використання не більш ніж трьох рівнів вкладеності вебсторінок.

• Помітність і наочність меню і кнопок, уникнення їх двозначності.

• Відмінність гіперпосилань від решти тексту.

• Використання в одному блоці не більш ніж 7 гіперпосилань (краще використовувати вкладені меню або блоки).

• Використання засобів навігації всередині тексту (зміст із посиланнями тощо) на вебсторінках із великим обсягом тексту.

Хід роботи

Під час роботи з комп’ютером дотримуйтеся правил безпеки.

1. Придумайте тему нового сайту, продумайте вміст і розташування елементів на головній сторінці сайту.

2. Знайдіть в інтернеті (або створіть самостійно) матеріал, необхідний для головної сторінки (тексти, рисунки, посилання тощо) і збережіть у папці Сайт.

3. Розробіть ескіз головної сторінки свого сайту в зошиті або текстовому чи графічному редакторі та створіть макет.

Накресліть таблицю навколо елементів сторінки (рис. 1).

4. За вказівкою вчителя запустіть встановлений на вашому комп’ютері один із HTML-редакторів, наприклад Microsoft SharePoint Designer, hefs-редактор тощо, або один із онлайн-редакторів: Online

HTML Editor; html-instant; Real-Time HTML Editor; TimsFreeStuff HTML Editor; Online WYSIWYG HTML Editor тощо.

5. Створіть HTML-код вебсторінки із порожньою таблицею і доповніть його кодом таблиці з потрібною кількістю рядків і стовпців відповідно до вашого макета (п. З, рис. 1, б), вказавши відносні розміри таблиці у відсотках. Збережіть HTML-файл з іменем index.html у папці Сайт.

6. Об’єднайте, де це потрібно, рядки і стовпці, щоб загальний вигляд таблиці відповідав запланованому розташуванню елементів на головній сторінці вашого сайту (рис. 2).

7. Установіть потрібні розміри (відносні та/чи абсолютні) для комірок таблиці згідно із зображеним вами макетом (рис. 2).

8. Додайте до таблиці потрібні написи і рисунки, меню, кнопки тощо відповідно до ескізу головної сторінки (рис. 1).

9. Відформатуйте елементи головної сторінки (колір, розмір, вирівнювання тощо) відповідно до критеріїв ергономіки.

10. Додайте до меню (і/або кнопок) необхідні гіперпосилання на інтер-нет-ресурси та перевірте роботу посилань.

11. Вимкніть відображення меж таблиці. Збережіть HTML-файл. Перегляньте сторінку сайту у кількох браузерах, з різним масштабу-ванням. Перевірте роботу меню та/або кнопок.

12. Надішліть HTML-файл вчителеві електронною поштою або збережіть файл на хмарному диску, надавши до нього доступ вчителю. Завершіть роботу за комп’ютером.

Зробіть висновок: як використовувати таблицю для макетування

вебсторінки.

РОЗДІЛ 5

АЛГОРИТМИ ТА ПРОГРАМИ

ПОВТОРЮЄМО

У 5-7 класах ви опанували основи мови програмування Python, знаєте, як реалізувати базові алгоритмічні структури і вмієте створювати програми з використанням розгалужень і повторень.

Ви розширили уявлення про типи величин і алгоритми опрацювання даних різних типів і розробляли програми з графічним інтерфейсом, створюючи об’єкти класів графічних компонентів. Ви також навчилися задавати властивості найуживаніших об’єктів графічного інтерфейсу та програмувати обробку подій для цих об’єктів.

Ви вмієте описувати об’єкти, використовувати екземпляри класів у програмах; оволоділи прийомами роботи в середовищі програмування IDLE, навчилися вести діалог в інтерактивному режимі в оболонці IDLE та ін.

У цьому розділі ви продовжите вивчення основ програмування мовою Python і навчитеся працювати в середовищі FyCharm. Воно включає текстовий редактор для введення програми з можливостями інтелектуального введення та автодоповнення коду, транслятор тощо.

 

Це матеріал з підручника Інформатика 8 клас Бондаренко (2021)